<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            background-image: url('https://pic.rmb.bdstatic.com/831371463b843382e847e12b3ac5e18f.jpeg@wm_2,t_55m+5a625Y+3L+iAgeWktOivtOeUteW9sQ==,fc_ffffff,ff_U2ltSGVp,sz_48,x_30,y_30');
            /* background-image: url(https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF);
            background-repeat: no-repeat;
            background-size: 100% 100%; */
        }
        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
            transform: translate(-50%, -50%);
            background-image: radial-gradient(rgba(255, 0, 0, .4) 0%, transparent 60%);
        }
    </style>
</head>
<body>

    <script>
        document.body.addEventListener('click', function (e) {
            const circle = document.createElement('div'); // <div></div>
            circle.setAttribute('class', 'circle');
            circle.setAttribute('style', `left: ${ e.clientX }px; top: ${ e.clientY }px;`);
            document.body.appendChild(circle);
        });
    </script>
</body>
</html>